<script setup lang="ts">
import axios from 'axios'
import { ref, watch } from 'vue'
import { ArticleItem, ArticleResData } from '../types/data'
import { useChannelStore } from '../store/channel'

const store = useChannelStore()
const props = defineProps({
  channelId: {
    type: Number,
    default: 0
  }
})

// 文章列表
const articles = ref<ArticleItem[]>([])
watch(
  // () => props.channelId,
  () => store.channelId,
  async () => {
    const res = await axios.get<ArticleResData>(
      `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          // channel_id: props.channelId,
          channel_id: store.channelId,
          timestamp: Date.now(),
        },
      },
    );
    articles.value = res.data.data.results
  },
  { immediate: true }
)

</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="article in articles" :key="article.art_id">
      <p class="title">{{ article.title }}</p>
      <img v-for="(src, i) in article.cover.images" :key="i" class="img" :src="src" alt="" />
      <div class="info">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate }}</span>
      </div>
    </div>
  </div>
</template>